<template>
	
	
	
	<view >
		<view>
			<u-button type="primary" text="添加主题" @click="addRootSubject"></u-button>
		</view>
		<u-modal :show="modalShow" title="添加主题"
			:showConfirmButton = "true" :showCancelButton="true"
			@confirm="doConfirm" @cancel="doCancel"
			:closeOnClickOverlay="true" >
			<view>
				<view style="display: flex; width: 100%; padding-bottom: 10rpx;">
					<view style="flex: 1;">标题</view>
					<view style="flex: 3;"><u--input customStyle="height:30rpx" placeholder="请输入内容" border="surround" v-model="newSubject.title" ></u--input></view>
				</view>
				<view style="display: flex; width: 100%;padding-bottom: 10rpx;">
					<view style="flex: 1;">内容</view>
					<view style="flex: 3;"><u--textarea customStyle="height:200rpx" placeholder="请输入内容"  v-model="newSubject.content" ></u--textarea></view>
				</view>
			</view>
			
		
		
		</u-modal>
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<u-list @scrolltolower="scrolltolower">
		  
		
		  <u-list-item v-for="(item, index) in subjects" :key="index">

			  		<view v-if="item.type == 1" class="subject">
			  			<u-row gutter="10" >
			  				<u-col span="1" >
			  					<view><u--image v-show="item.hasSons" width="50rpx" height="50rpx" :src="`/static/pic/下拉.png`"></u--image></view>
			  				</u-col>
			  				<u-col span="1" >
			  					<view><u--image width="50rpx" height="50rpx" :src="`/static/pic/subject-1.png`"></u--image></view>
			  				</u-col>
			  				<u-col span="7">
			  					<view>{{item.title}}</view>
			  				</u-col>
			  				<u-col span="1">
			  					<view><u--image  @click="addSubject(2,item.id)" width="50rpx" height="50rpx" :src="`/static/pic/add-subject.png`"></u--image></view>
			  				</u-col>
			  			</u-row>
			  		</view>
					<view v-else-if="item.type == 2" class="subject">
						<u-row gutter="10" >
							<u-col span="1" >
								
							</u-col>
							<u-col span="1" >
								<view><u--image v-show="item.hasSons" width="50rpx" height="50rpx" :src="`/static/pic/下拉.png`" @click="showSons(item.id)"></u--image></view>
							</u-col>
							<u-col span="1" >
								<view><u--image  width="50rpx" height="50rpx" :src="`/static/pic/subject-2.png`"></u--image></view>
							</u-col>
							<u-col span="6">
								<view>{{item.title}}</view>
							</u-col>
							<u-col span="1">
								<view><u--image @click="addSubject(3,item.id)" width="50rpx" height="50rpx" :src="`/static/pic/add-subject.png`"></u--image></view>
							</u-col>
						</u-row>
					</view>	
					 <view v-else-if="item.type == 3" v-show="showSonSubjects[item.parentId]" class="subject">
					 	<u-row gutter="10" >
					 		<u-col span="1" >
					 		</u-col>
					 		<u-col span="1" >
					 			<view></view>
					 		</u-col>
					 		<u-col span="1" >
					 			<view></view>
					 		</u-col>
					 		<u-col span="6">
					 			<view>{{item.title}}</view>
					 		</u-col>
					 		<u-col span="1">
					 			
					 		</u-col>
					 	</u-row>
					 </view>	

		  		
		  </u-list-item>
		  
		
		  <!-- 
		  <u-list-item >
		  			<view class="subject">
		  				<u-row gutter="10" >
		  					<u-col span="1" >
		  						<view><u--image width="50rpx" height="50rpx" :src="`/static/pic/下拉.png`"></u--image></view>
		  					</u-col>
		  					<u-col span="1" >
		  						<view></view>
		  					</u-col>
		  					<u-col span="1" >
		  						<view><u--image width="50rpx" height="50rpx" :src="`/static/pic/subject-2.png`"></u--image></view>
		  					</u-col>
		  					<u-col span="6">
		  						<view>内容2</view>
		  					</u-col>
		  					<u-col span="1">
		  						<view><u--image width="50rpx" height="50rpx" :src="`/static/pic/add-subject.png`"></u--image></view>
		  					</u-col>
		  				</u-row>
		  			</view>
		  </u-list-item> -->
		</u-list>
		
		
		
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>123</view>
		<view>
			<u-button type="primary" text="确定" ></u-button>
		</view>
		
		<view>
			<u-input v-model="storageInput" /></u-form-item>
			<u-button type="primary" text="storageSave" @click="storageSave"></u-button>
		</view>
		<view>
			<u-button type="primary" text="storageGet"  @click="storageGet" ></u-button>
		</view>
		<view>
			<u-button type="primary" text="userinfo"  @click="userinfo" ></u-button>
		</view>
		<view>
			{{storagePrint}}
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalShow: false,
				newSubject:{},
				showSonSubjects:{},
				showSonSubjects_demo:{
					1:true,
					2:false,
					4:true,
					5:false
				},
				subjects:[],
				//demo数据
				subjects_demo:[
					{	
						id: 1,
						type: 1,
						hasSons: true,
						title: 'title1',
						content: 'content1'
					},
					{
						id:2,
						parentId: 1,
						rootId: 1,
						type: 2,
						hasSons: true,
						title: 'title2',
						content: 'content2'
					},
					{
						id:3,
						parentId: 2,
						rootId: 1,
						type: 3,
						hasSons: false,
						title: 'title3',
						content: 'content3'
					},
					
					{
						id:4,
						type: 1,
						hasSons: true,
						title: 'title1',
						content: 'content1'
					},
					{
						id:5,
						parentId: 4,
						rootId: 4,
						type: 2,
						hasSons: true,
						title: 'title2',
						content: 'content2'
					},
					{
						id:6,
						parentId: 5,
						rootId: 4,
						type: 3,
						hasSons: false,
						title: 'title3',
						content: 'content3'
					},
					{
						id:7,
						parentId: 5,
						rootId: 4,
						type: 3,
						hasSons: false,
						title: 'title4',
						content: 'content4'
					},
					
					
				],
				indexList: [1,2,3],
				        
				storageInput:'',
				storagePrint:'init',
				title: 'Hello'
			}
		},
		onLoad() {

		},
		onShow() {
			this.loadData();
		},
		methods: {
			showSons(itemId){
				
				this.showSonSubjects[itemId] = !this.showSonSubjects[itemId];
				this.$forceUpdate();
				
			},
			clearModal(){
				this.newSubject = {}
			},
			openModal(type){
				this.newSubject.type = type;		//设置当前添加主题的类型
				this.modalShow  = true;
			},
			closeModal(){
				this.modalShow = false;
			},
			addRootSubject(){
				this.openModal(1);
			},
			clearData(){
				this.showSonSubjects = {};
				this.subjects = [];
			},
			loadData(){
				this.clearData();
				uni.request({
					method: 'GET',
				    url: 'http://localhost:33008/daily/subject/getall',
					// url: 'http://localhost:33100/stock-app-daily/daily/subject/getall',
					header: {
					    'token': uni.getStorageSync('token')
					},
				    success: (res) => {
						if(res != null){
							if(res.data.errorCode == '403'){
								//跳转登录页面
								uni.navigateTo({
									url:"/pages/userlogin/userlogin"
								})
							}
						}
						this.subjects = res.data;
						//组装showSonSubjects
						for (var index = 0; index < res.data.length; index++) {
							var element = res.data[index];
							this.showSonSubjects[element.id] = false;
							if(element.type == 1){
								if(element.hasSons){
									this.showSonSubjects[element.id] = true;	
								}
							}
							
						}
				    }
				});
			},
			doConfirm(){
				
				uni.request({
					method: 'POST',
				    url: 'http://localhost:33008/daily/subject/add',
				    data: this.newSubject,
				    success: (res) => {
						this.loadData();
				    }
				});
				
				this.closeModal();
				this.clearModal();
			},
			doCancel(){
				this.closeModal();
				this.clearModal();
			},
			addSubject(type,parentId){
				console.log('1111111111');
				this.newSubject.parentId = parentId;
				this.openModal(type);
			},
			storageSave(){
				uni.setStorageSync('storage',this.storageInput);
				
			},
			storageGet(){
				this.storagePrint = uni.getStorageSync('storage');
			},
			userinfo(){
				console.log('token',uni.getStorageSync('token'));
				console.log('userinfo',uni.getStorageSync('userinfo'));
			},
			
			
			
		}
	}
</script>

<style>
	.subject1{
		border-bottom-style: 1px;
		border-style:  solid;
		border-color: darkgrey;
	}
	.subject{
		border-width: 1px;
		border-style:  solid;
		border-color: white;
		border-bottom-color: lightgrey;
		/* border-color: darkgrey; */
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
